<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<!-- <view class="btn">
			<contact-button color="#ffffff00" :tnt-inst-id="tntInstId" icon="../../static/image/OIP.jpg" size="50" :ext-info="extnfo" :scene="scene"/>
		</view> -->
		<movable-area  class="ai-button-container">
			<!-- #ifdef MP-ALIPAY -->
			<movable-view class="ai-box" :class="{'transparent':isShow==false}" :position="position" :x="x" :y="y"
				direction="all" damping="10" @change="onChange" @touchend="onTouchend">
				
				<view class="compla" @tap="goservice">
					<image class="icon_img" :src="'https://file.aavisa.com/001/kf3.png'" mode="heightFix" />
				</view>
			</movable-view>

			<!-- #endif -->
		</movable-area>
		<!-- #endif -->
		<u-popup v-model="show" mode="center" :round="10"   z-index="999">
			<view class="input-row">
				<view class="titleview"><text class="title">昵称:</text></view>
				<input class="uni-input-input" type="nickname" v-model="nikeName" @blur="handleNickNameChange" id='nickname-input' placeholder="请输入昵称" />
				
			</view>
			<view  style="margin-bottom: 20rpx;">
				<u-button type="success" @click="confirm">开始沟通</u-button>
			</view>
			<!-- <u-button @click="confirm">确认</u-button> -->
		</u-popup>
	</view>

</template>

<script>
	import {
		GetContractEncodeInfo,
		GetContractInfo
	} from '@/api/api.js'
	const app = getApp();
	export default {
		props: {},
		data() {
			return {
				tntInstId: 'vG2_nJei',
				scene: 'SCE01311051',
				position: 4,
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				isShow: false,
				extnfo: "",
				appid: "",
				sysinfo: null,
				show: false,
				nikeName: "",
			}
		},
		mounted() {
			// this.tntInstId = this.$tntInstId
			// this.scene = this.$scene
			this.appid = getApp().globalData.appid
			console.log(getApp().globalData)
			this.extInfo = encodeURIComponent({
				"appId": this.appid
			})
			uni.getSystemInfo({
				success: (res) => {
					this.sysinfo = res
					console.log(res, "systeminfo")
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
						//是否显示，在调整位置后显示
						this.isShow = true
					}, 0)
				}
			})
		},
		onShow() {},
		methods: {
			handleNickNameChange(e) {  
			      console.log('handleNickNameChange', e.detail.value);  
			      this.nikeName = e.detail.value  
				  console.log(this.nikeName,"nikename")
				  uni.setStorageSync('storage_key', this.nikeName)
			},
			confirm() {
				this.show = false
				this.goservice()
			},
			open() {
				// console.log('open');
			},
			goservice() {
				
				// this.show = true
				let nikename = uni.getStorageSync('storage_key');
				console.log(nikename, "nike_name")
				if (!nikename ) {
					this.show = true;
					
					return
				}
				else{
					this.show = false
				}
				// console.log(uni.getStorageInfoSync('nike_name'), "nike_name")
				// uni.navigateTo({
				// 	url: `/pages/user/service`
				// })
				console.log(getApp().globalData, "globalData")
				let data = {
					"extInfo": {
						"uid": getApp().globalData.userInfo.MemberId,

						"customerInfo": getApp().globalData.userInfo.MemberId
					},
					"userId": getApp().globalData.userInfo.MemberId,
					"uname": nikename,
					"browser": this.sysinfo.deviceModel
				}
				GetContractEncodeInfo(data).then(res => {
					console.log(res, "GetContractEncodeInfoRes")
					console.log(app.globalData.userInfo);
					let url =
						`https://cschat.cloud.alipay.com/index.htm?tntInstId=vG2_nJei&scene=SCE01311051&cinfo=${res.data.cinfo}&key=${res.data.key}`
					console.log(url)
					let encodeurl = encodeURIComponent(url)
					getApp().goToPage(
						`/pages/uploadDataByH5/index?cinfo=${res.data.cinfo}&key=${res.data.key}&title=客服咨询`)
				})

				// getApp().goToPage(`/pages/uploadDataByH5/index?url=${url}`)
			},
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				// 吸边
				// setTimeout(() => {
				// 	if (this.move.x < this.x2 / 2) this.x = this.x1;
				// 	else this.x = this.x2;
				// 	console.log(this.x, this.y)
				// }, 100)
			},
		}

	}
</script>

<style scoped>
	@import "./service.css";

	.ai-button-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 999;
	}

	.ai-button-container .transparent {
		opacity: 0;
	}

	.ai-button-container .ai-box {
		pointer-events: auto;
		width: 70upx;
		height: 70upx;
	}

	.ai-button-container .ai-box .btn {
		width: 80upx;
		height: 80upx;
		/* background-image: url('../../'); */
		border-radius: 50%;
		background-size: 100% 100%;
	}

	.ai-button-container .ai-box .btn /deep/ contact-button {
		width: 100%;
		height: 100%;
	}

	/* 适配iphonex 有底部横条的 */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.fixed-box {
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
		}
	}
	.compla {
		// position: fixed;
		right: 24rpx;
		bottom: 250rpx;
		height: 100rpx;
		width: 100rpx;
		background: #226BF6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	
		
	}
	.compla .icon_img {
		width: 60rpx;
		height: 60rpx;
		animation: bounceDown 1s linear infinite;
	}
</style>